<template>
  <div class="loginRecord">
    <div class="loginRecord-sear" v-if="isShowSear">
      <el-form size="mini" inline>
        <el-form-item label="关键字">
          <el-input placeholder="关键字检索(名称)" v-model="searParams.keyword"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="createDate"
            style="width: 300px"
            size="mini"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="center"
            @change="selectDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-button size="mini" type="primary" @click="executionSear">查询</el-button>
        <el-button size="mini" @click="resetSearParams()">重置</el-button>
      </el-form>
    </div>
    <div class="loginRecord-oper">
      <div class="loginRecord-oper-left">
        <el-button type="danger" size="mini" plain icon="el-icon-delete" @click="removeBatch()">
          删除
        </el-button>
        <el-button type="danger" size="mini" plain icon="el-icon-delete" @click="clear()">
          清空
        </el-button>
      </div>
      <div class="loginRecord-oper-right">
        <el-button
          icon="el-icon-search"
          size="mini"
          circle
          @click="isShowSear = !isShowSear"
        ></el-button>
        <el-button icon="el-icon-refresh" size="mini" circle @click="list()"></el-button>
      </div>
    </div>
    <div class="loginRecord-list">
      <el-table
        stripe
        v-if="isRefreshTable"
        :data="loginRecordPage.list"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        :default-expand-all="isExpand"
        tooltip-effect="dark"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @selection-change="selectionModify"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- <el-table-column prop="id" label="ID" sortable width="180">
      </el-table-column> -->
        <el-table-column prop="tenant" label="用户名" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column
          prop="beginTime"
          label="登录时间"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="endTime"
          label="退出时间"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column prop="status" label="登录状态" width="150">
          <template slot-scope="scope">
            <el-tag :type="getStatusTag(scope.row.status)" effect="plain">{{
              scope.row.status == 1 ? "登录成功" : "登录失败"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="IP" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.ip }}
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="浏览器" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.browser }}
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="操作系统" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.operSystem }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="removeSingle(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="loginRecordPage.totalCount"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="loginRecordPage.pageSize"
        @current-change="modifyOffset"
        @size-change="modifyLimit"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { list, deleteByIds, clear } from "@/api/loginRecord"
import { isNotEmpty, isEmpty, isNotNull, isNull } from "@/utils/validate"
export default {
  data() {
    return {
      isShowSear: true,
      isRefreshTable: true,
      isExpand: false,
      searParams: {},
      createDate: "",
      loginRecordPage: {},
      abilityList: [],
      selectItems: [],
      selectIds: []
    }
  },
  created() {
    this.initSearParams()
    this.list()
  },
  methods: {
    /**
     * 初始化搜索数据
     */
    initSearParams() {
      this.searParams = {
        offset: 1,
        limit: 5,
        fromTime: "",
        toTime: "",
        keyword: ""
      }
    },
    /**
     * 选中时间
     */
    selectDate(val) {
      this.searParams.fromTime = val[0]
      this.searParams.toTime = val[1]
    },
    /**
     * 获取状态tag样式
     */
    getStatusTag(status) {
      return status == 1 ? "success" : "danger"
    },
    /**
     * 执行搜索
     */
    executionSear() {
      this.list()
    },
    /**
     * 查询登录记录列表
     */
    list() {
      list(this.searParams).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.loginRecordPage = res.data
        }
      })
    },
    /**
     * 修改页码
     */
    modifyOffset(offset) {
      this.searParams.offset = offset
      this.list()
    },
    /**
     * 修改页数
     */
    modifyLimit(limit) {
      this.searParams.limit = limit
      this.list()
    },
    /**
     * 选择表格数据改变
     */
    selectionModify(logItem) {
      this.selectItems = []
      this.selectIds = []
      for (let i = 0; i < logItem.length; i++) {
        this.selectItems.push(logItem[i])
        this.selectIds.push(logItem[i].id)
      }
    },
    /**
     * 批删
     */
    removeBatch() {
      this.removeByIds(this.selectIds)
    },
    /**
     * 单删
     */
    removeSingle(logItem) {
      this.removeByIds(logItem.id)
    },
    /**
     * 通过id删除登录记录
     */
    removeByIds(loginRecordIds) {
      if (isEmpty(loginRecordIds)) {
        this.$message("未选中登录记录")
        return
      }
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteByIds(loginRecordIds).then((res) => {
            if (res.code === 0) {
              this.list()
              this.$message({
                message: "删除登录记录成功",
                type: "success"
              })
            } else {
              this.$message.error("删除登录记录失败")
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    },
    /**
     * 清空日志
     */
    clear() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          clear().then((res) => {
            if (res.code === 0) {
              this.list()
              this.$message({
                message: "清空登录记录成功",
                type: "success"
              })
            } else {
              this.$message.error("清空登录记录失败")
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消清空"
          })
        })
    }
  }
}
</script>

<style>
.loginRecord-index {
  height: auto;
  margin: 1%;
  display: flex;
  flex-direction: column;
}

.loginRecord-oper {
  margin: 12px 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.loginRecord-list {
  text-align: center;
}
</style>